<template>
	<view class="content">
		<view class="header" :style="{'padding-top':tops+'px'}">
			<view style="height: 100rpx;">
				<view class="back" @click="goBack">
					<image src="../../static/9.png"></image>
				</view>
				
				<view class="name">客户类别</view>
				<view class="history" @click="showPop">新增</view>
			</view>
		
			<view class="tabList-box">
				<view class="tabList">
					<view class="li" :class="tabActive == index ? 'tabActive':''" v-for="(item,index) in tabList"
						@click="tabChange(index)">{{ item.text }}</view>
				</view>
			</view>
		</view>
		
		
        <view class="lists">
        	<view class="li" style="font-weight: bold;">
        		<view>名字</view>
        		<view>状态</view>
        		<view>操作</view>       		
        	</view>
        	<view class="li">
        		<view>主要客户</view>
        		<view>正常</view>
        		<view class="set">
					<view>删除</view>
					<view>修改</view>
				</view>       		
        	</view>
        </view>
	    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @maskClick="closeScreen">
	    	<view class="screen-box">
	    		<view class="title">跟进类别 <image class="close" @click="closeScreen" src="../../static/18.png"></image></view>
	    		<input type="text" placeholder="请输入类别名称"/>
	    		<view class="swichBox">
					<view class="li" v-for="(item,index) in swich" :class="swichActive == index ? 'tabActive':''" @click="swichChange(index)">{{item.name }}</view>
				</view>
				<view class="btn">
	    			保存
	    		</view>
	    	</view>
	    </uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				tabList: [{
						text: '客户类别'
					},
					{
						text: '跟进类别'
					}
				],
				tabActive: 0,
				swich: [{
						name: '正常',
						value: 0
					},
					{
						name: '禁用',
						value: 1
					}
				],
				swichActive: 0,
				tops:0,
				height:0
			}
		},
		onLoad(options) {
			console.log(options)
			this.tabActive = options.index
			this.height = 100;
			uni.getSystemInfo({

				success: (e) => {

				  this.tops = e.statusBarHeight;
				  let custom = uni.getMenuButtonBoundingClientRect();
                 
				  
				 /*#ifdef MP-WEIXIN*/
                  this.height = 140 + custom.height + (custom.top - e.statusBarHeight) * 2;
                  /*#endif*/
				  console.log('========',this.height)
				}

			  })

		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			showPop(){
				 this.$refs.popup.open('center')
				 this.screenPop = true
			},
			closeScreen(){
				this.$refs.popup.close()
				console.log('关闭')
				 this.screenPop = false
			},
			confirmScreen(){
				this.$refs.popup.close()
			},
			addSeniorData(){
				uni.navigateTo({
					url:"/pages/addSeniorData/index"
				})
			},
			tabChange(index) {
				this.tabActive = index
			},
			swichChange(index){
				this.swichActive = index
			},
			history(){
				uni.navigateTo({
					url:'/pages/customerHistory/index'
				})
			},

		}
	}
</script>

<style>
	
	.screen-box{
		width: 520rpx;
		height: 400rpx;
		background-color: white;
		border-radius: 10rpx;
		font-size: 26rpx;
	}
	.screen-box .title{
		width: 90%;
		margin: auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	    color: #008BDE;
		text-align: center;
	}
	.screen-box .title .close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 15rpx;
	}
	.screen-box input{
		width: 75%;
		display: block;
		border: 1rpx solid #ccc;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		margin: auto;
		padding-left: 20rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.swichBox{
	   width: 78.3%;
		height: 60rpx;
		margin: auto;
		line-height: 60rpx;
		border: 1rpx solid #008BDE;
		display: flex;
		margin-top: 20rpx;
	}
	
	.swichBox .li {
		width: 50%;
		text-align: center;
		font-size: 26rpx;
	}
	
	.swichActive {
		background-color: #008BDE;
		color: white !important;
	}
	.header{
		width: 100%;
		height: 180rpx;
		line-height: 90rpx;
		position: fixed;
		top: 0;
		z-index: 10;
		text-align: center;
		background-color: white;
	}
	.header .back{
		width: 60rpx;
		height: 100%;
		margin-left: 30rpx;
		float: left;
		display: flex;
		align-items: center;
	}
	.header .back image{
		width: 20rpx;
		height: 40rpx;
	   
	}
	.header .name{
		height: 100%;
		line-height: 90rpx;
		margin-top:7rpx;
		background-color: white;
	}
	.header .history{
		width: 150rpx;
		height: 55rpx;
		line-height: 55rpx;
		background: #008BDE;
		border-radius: 5rpx;
		position: absolute;
		font-size: 26rpx;
		right: 40rpx;
		top: 26rpx;
		color: #fff;
	}
	/*#ifdef MP-WEIXIN*/
	   .header .name{
	   	width: 35%;
	   	line-height: 90rpx;
		margin-right: 50rpx;
		float: left;
	   }
	   .header .history{
		   float: left;
		   position: initial;
		   margin-top: 24rpx;
	   }
	/*#endif*/
	.tabList-box{
		width: 100%;
		background-color: white;
		height: 120rpx;
		background-color: white;
		/* position: fixed;
		top: 100rpx;
		left: 0;
		right: 0; */
		margin: auto;
		z-index: 100;
		/*#ifdef MP-WEIXIN*/
		/* top: 120rpx; */
		/*#endif*/
	}
	.tabList {
		width: 90%;
		height: 70rpx;
		margin: auto;
		line-height: 70rpx;
		border: 1rpx solid #008BDE;
		display: flex;
	}

	.tabList .li {
		width: 50%;
		text-align: center;
		color: #008BDE;
		font-size: 26rpx;
	}

	.tabActive {
		background-color: #008BDE;
		color: white !important;
	}
    .lists{
    	width: 90%;
    	margin: auto;
    	margin-top: 220rpx;
        /*#ifdef MP-WEIXIN*/
        margin-top: 250rpx;
        /*#endif*/
    }
    .lists .li{
    	line-height: 60rpx;
    	margin-top: 20rpx;
    	border-bottom: 1rpx solid #f5f5f5;
    	padding-bottom: 20rpx;
    	font-size: 28rpx;
    	position: relative;
		display: flex;
    }
    .lists .li view{
    	flex: 1;
		text-align: center;
    }
    .lists .li .name span{
    	margin-left: 20rpx;
    }
    .lists .li .set{
    	display: flex;
		justify-content: space-between;
    }
	 .lists .li .set view{
		 width: 40%;
		 text-align: center;
	 }
    .lists .li .time{
    	display: flex;
    }
    .lists .li .time span:nth-child(2){
    	margin-left: 100rpx;
    }
    .lists .li .right{
    	width: 20rpx;
    	height: 40rpx;
    	position: absolute;
    	right: 30rpx;
    	top: 90rpx;
    }
	
	.imgList{
		margin-top: 20rpx;
	}
	/deep/ .icon-add{
		width: 50rpx;
	}
	
	.btn{
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 80rpx;
		color: white;
		text-align: center;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}
    

</style>